<template>
  <view class="page-home">
    <topbar :tabs="tabs" :active="getActive" @change="changeTab"></topbar>
    <view class="page-ticket">
      <scroll-view scroll-y scroll-with-animation class="category-bar">
        <view v-for="(item, index) in cateData" :key="index" class="category-item"
            :class="{'current': current === index}"
            @click="getlist(index)">
            <text class="line-1">{{item.name}}</text>
        </view>
      </scroll-view>
      <scroll-view scroll-y scroll-with-animation class="category-content">
        <view style="padding: 16rpx; height: 100%;">
          <view
            class="ticket-card"
            v-for="(item, index) in ticketGroup"
            :key="index"
          >
            <view v-if="item.title" class="title">{{ item.title }}</view>
            <view
              class="tiket-item flex-between"
              v-for="(v, i) in item.list"
              :key="i"
            >
              <view class="left">
                <view class="ticket-name">{{ v.name }}</view>
                <view class="ticket-msg">{{ `随买随用 | 无忧退` }}</view>
              </view>
              <view class="right">
                <view class="price primary-color">￥{{ v.price }}</view>
                <view class="mini-btn" @click="get_details(v)">预定</view>
              </view>
            </view>
          </view>
        </view>
      </scroll-view>
    </view>
    <uni-calendar
      :showMonth="false"
      :start-date="nowDay"
      ref="calendar"
      :insert="false"
      @confirm="confirm"
    />
    <SignUp ref="signUp" />
  </view>
</template>

<script>
import ImageFile from "../../components/img_file.vue";
import { mobileList, mobileGroupList } from "../../api/ticket/index.js";
import { dayjs } from "@/uni_modules/iRainna-dayjs/js_sdk/dayjs.min.js";
export default {
  components: {
    ImageFile,
  },
  data() {
    return {
      nowDay: dayjs().format("YYYY-MM-DD"),
      tabs: [
        { title: "今日", key: "1" },
        { title: "明日", key: "2" },
        { title: "更多日期", key: "dateSelect" },
      ],
      current: 0,
      cateData: [],
      query: {
        pageSize: 999,
        currentPage: 1,
      },
      is_loading: false,
      data_list: [],
      path: "",
      active: "1",
      selectDate: "",
      ticketGroup: [],
      // 当前选择的具体日期
      selectDateInfo: ''
    };
  },
  created() {
    this.path = uni.getStorageSync("host") || "";
    this.getGroupList();
    this.get_data_list();
  },
  computed: {
    getActive() {
      if (this.selectDate) {
        return "dateSelect";
      } else {
        return this.active;
      }
    },
  },
  methods: {
    confirm(e) {
      console.log(9999999, e);
      this.selectDate = e.fulldate;
      this.tabs[2].title = e.fulldate;
      this.active = "dateSelect";
      this.get_data_list();
    },
    changeTab(e) {
      if (e == "dateSelect") {
        this.$refs.calendar.open();
      } else {
        this.selectDate = "";
        this.tabs[2].title = "更多日期";
        this.active = e;
        this.get_data_list();
      }
    },
    open() {
      uni.navigateTo({
        url: "/pages/login/index",
      });
    },
    get_details(val) {
      const userInfo = uni.getStorageSync("userInfo");
      if (!userInfo.phone) {
        return this.$refs.signUp.open(); //改为弹窗注册
      }
      // 点击跳转详情
      uni.setStorageSync("details", {...val, orderDate: this.selectDateInfo});
      console.log(val, "val--");
      uni.navigateTo({
        url: `/pages/ticket/ticket/details`,
      });
    },
    getlist(index) {
      this.current = index;
      this.get_data_list();
    },
    getGroupList() {
      uni.showLoading();
      this.cateData = [
        {
          id: '',
          name: '全部'
        }
      ];
      mobileGroupList({})
      .then((res) => {
        this.cateData = [...this.cateData, ...res.body];
      })
      .catch((error) => {
        uni.hideLoading();
      });
    },
    get_data_list() {
      this.is_loading = true;
      const dates = {
        1: {
          excursionDate: dayjs().format("YYYY-MM-DD"),
        },
        2: {
          excursionDate: dayjs().add(1, "day").format("YYYY-MM-DD"),
        },
        dateSelect: {
          excursionDate: dayjs(this.selectDate).format("YYYY-MM-DD"),
        },
      };
      this.selectDateInfo = dates[this.active].excursionDate;
      let parmas = {
        ...this.query,
        ...dates[this.active],
      };
      if(this.current !== 0) {
        parmas.groupId = this.cateData[this.current].id;
      }
      mobileList(parmas)
        .then((res) => {
          uni.hideLoading();
          const { records, current, pages } = res.body;
          this.data_list = records;
          const groups = records.reduce((pre, cur) => {
            if (cur.groupName) {
              pre = [...new Set([...pre, cur.groupName])];
            }
            return pre;
          }, []);

          let groupList = groups.map((v) => {
            return {
              title: v,
              list: records.filter((it) => it.groupName && it.groupName === v),
            };
          });
          if (records.some((v) => !v.groupName)) {
            groupList.push({
              title: "其他",
              list: records.filter((v) => !v.groupName),
            });
          }
          console.log(groupList, "--------------");
          if (groupList.length === 1) {
            groupList[0].title = "";
          }
          // for(let i = 0; i < 4; i++) {
          //   this.ticketGroup = [...this.ticketGroup, ...groupList];
          // }
          this.ticketGroup = groupList;

          // 当前页大于总页 显示没有更多了
          if (current >= pages) {
            this.is_loading = true;
          } else {
            this.is_loading = false;
          }
        })
        .catch((error) => {
          uni.hideLoading();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-home {
  position: fixed;
  top: 0;
  width: 100%;
  /* height: calc(100vh - 126upx); */
  height: calc(100vh - 176upx);
}
.page-ticket {
  height: 100%;
  // background-color: #f3f4f6;
  // padding: 30rpx 0;
  padding-top: 115rpx;
  // padding-bottom: 160rpx;
  flex: 1;
  display: flex;
  overflow: hidden;
  .ticket-card {
    padding: 0 20rpx;
    background-color: #fff;
    // margin-bottom: 30rpx;
    .title {
      padding: 20rpx 0;
      font-size: 36rpx;
      font-weight: bold;
    }
    .tiket-item {
      background-color: #f3f4f6;
      margin-bottom: 30rpx;
      padding: 20rpx 30rpx;
      border-radius: 10rpx;
      .left {
        .ticket-name {
          font-size: 32rpx;
          font-weight: bold;
        }
        .ticket-msg {
          font-size: 24rpx;
          color: #ff6600;
          margin-top: 30rpx;
        }
      }
      .right {
        min-width: 110rpx;
        .price {
          font-size: 34rpx;
          font-weight: bold;
          text-align: right;
          margin-bottom: 20rpx;
        }
        .mini-btn {
          display: inline-block;
          padding: 8rpx 20rpx;
          background-color: #5cc39d;
          border-radius: 28rpx;
          color: #fff;
          font-size: 26rpx;
          display: flex;
          justify-content: center;
          padding-bottom: 5px;
        }
        .add-sub {
          width: 180rpx;
          .add-sub-btn {
            width: 40rpx;
            font-size: 34rpx;
            height: 40rpx;
            color: #5cc39d;
            background-color: #fff;
          }
        }
      }
    }
  }
}
.category-bar {
  width: 200rpx;
  background-color: #f6f6f6;
  .category-item {
    text-align: center;
    height: 92rpx;
    line-height: 92rpx;
    font-size: 28rpx;
    &.current {
      // color: #e93b3d;
      background-color: #FFFFFF;
      width: 100%;
      position: relative;
      &::before {
        content: '';
        display: inline-block;
        width: 4rpx;
        height: 100%;
        background-color: #5cc39d;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
  }
  .line-1 {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
}
</style>
